<template>
  <div class="lightgallery">
    <div class="header d-flex flex-column align-items-center">
      <a class="btn mb-5 btn-outline-primary" href="https://www.lightgalleryjs.com/" target="_blank">Vue3版本</a>
      <p>
        <a class="btn mb-5 btn-outline-primary" target="_blank" href="https://github.com/sachinchoolur/lightGallery">以下是
          vue2版本， View
          on GitHub</a>
      </p>
    </div>
    <!-- 图片 -->
    <el-row :gutter="20">
      <el-col :span="24" class="t">以下是图片预览：</el-col>
    </el-row>
    <div class="container-sm">
      <div class="row justify-content-center">
        <div class="col col-md-10">
          <div class="gallery-container" id="lightgallery">
            <a data-lg-size="1600-1067" class="gallery-item"
              data-src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80">
              <img class="img-responsive"
                src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
            </a>
            <a data-lg-size="1600-2400" class="gallery-item"
              data-src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80">
              <img class="img-responsive"
                src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
            </a>
            <a class="gallery-item1" :data-lg-size="item.lg_size" :data-pinterest-text="item.pinterest_text"
              :data-tweet-text="item.tweet_text" :data-src="item.src" :data-sub-html="item.sub_html"
              v-for="(item, index) in imageList" :key="index">
              <img class="img-responsive" :src="item.src" />
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频 -->
    <!-- data-iframe=true是将用iframe来承载视频 -->
    <el-row :gutter="20">
      <el-col :span="24" class="t">以下是视频预览：</el-col>
    </el-row>
    <div class="gallery-container" id="lightgallery1">
      <a class="gallery-item1" :data-lg-size="item.lg_size" :data-src="item.src" :data-sub-html="item.sub_html"
        v-for="(item, index) in videoList" :key="index" :data-poster="item.poster" :data-iframe="true">
        <img class="img-responsive" :src="item.poster" />
      </a>
    </div>

    <div>
      <button class="btn_c">Hover me!</button>
    </div>
  </div>
</template>

<script>
// vue2版本
import 'lightgallery.js';
import 'lightgallery.js/dist/css/lightgallery.css';

// lightgallery plugins
import '@/assets/js/lg-autoplay.min.js'
import '@/assets/js/lg-fullscreen.min.js'
import '@/assets/js/lg-hash.min.js'
import '@/assets/js/lg-pager.min.js'
import '@/assets/js/lg-rotate.min.js'
import '@/assets/js/lg-share.min.js'
import '@/assets/js/lg-thumbnail.min.js'
import '@/assets/js/lg-video.min.js'
import '@/assets/js/lg-zoom.min.js'

export default {
  data(){
    return{
      imageList: [
        {
          "lg_size": "1600-1067",
          "src": "https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@tobbes_rd' >Tobias Rademacher </a></h4><p> Location - <a href='https://unsplash.com/s/photos/puezgruppe,-wolkenstein-in-gröden,-südtirol,-italien'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>"
        },
        {
          "lg_size": "1600-2400",
          "pinterest_text": "Pin it2",
          "tweet_text": "lightGallery slide 2",
          "src": "https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@therawhunter' >Massimiliano Morosinotto </a></h4><p> Location - <a href='https://unsplash.com/s/photos/tre-cime-di-lavaredo,-italia'>Tre Cime di Lavaredo, Italia</a>This is the Way</p>"
        },
        {
          "lg_size": "1600-2400",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1605973029521-8154da591bd7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@thesaboo' >Sascha Bosshard </a></h4><p> Location - <a href='https://unsplash.com/s/photos/pizol,-mels,-schweiz'>Pizol, Mels, Schweiz</a></p>"
        },
        {
          "lg_size": "1600-2398",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1526281216101-e55f00f0db7a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@yusufevli' >Yusuf Evli </a></h4><p> Foggy Road</p>"
        },
        {
          "lg_size": "1600-1067",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@flovayn' >Jay Mantri</a></h4><p> Misty shroud over a forest</p>"
        },
        {
          "lg_size": "1600-1067",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1505820013142-f86a3439c5b2?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@flovayn' >Florian van Duyn</a></h4><p>Location - <a href='Bled, Slovenia'>Bled, Slovenia</a> </p>"
        },
        {
          "lg_size": "1600-1126",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@juanster' >Juan Davila</a></h4><p>Location - <a href='Bled, Slovenia'>Bled, Slovenia</a> Wooded lake island </p>"
        },
        {
          "lg_size": "1600-1063",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@davidmarcu' >David Marcu</a></h4><p>Location - <a href='https://unsplash.com/s/photos/ciucaș-peak,-romania'>Ciucaș Peak, Romania</a> Alone in the unspoilt wilderness </p>"
        },
        {
          "lg_size": "1600-2400",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1585338447937-7082f8fc763d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@whoisbenjamin' >whoisbenjamin</a></h4>\n <p>Location - <a href='https://unsplash.com/s/photos/ciucaș-peak,-romania'>Snowdonia National Park, Blaenau Ffestiniog, UK</a> \n A swan on a calm misty lake in the mountains of Snowdonia, North Wales. <a href='https://unsplash.com/photos/9V6EkAoTWJM'>Link</a> </p>"
        },
        {
          "lg_size": "1600-1144",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1476842384041-a57a4f124e2e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@aaronburden' >Aaron Burden</a></h4><p>Location - <a href='https://unsplash.com/s/photos/grayling,-michigan,-united-states'>Grayling, Michigan, United States</a> Colorful trees near a lake. <a href='https://unsplash.com/photos/00QWN1J0g48'>Link</a> </p>"
        },
        {
          "lg_size": "1600-1067",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1465311530779-5241f5a29892?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@kalenemsley' >Kalen Emsley</a></h4><p>Location - <a href='https://unsplash.com/s/photos/yukon-territory,-canada'>Yukon Territory, Canada</a> No captions. <a href='https://unsplash.com/photos/eHpYD4U5830'>Link</a> </p>"
        },
        {
          "lg_size": "1600-1067",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1461301214746-1e109215d6d3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@kace' >Kace Rodriguez</a></h4><p>Location - <a href='https://unsplash.com/s/photos/pfeiffer-beach,-united-states'>Pfeiffer Beach, United States</a> Pfeiffer Beach at Dusk. <a href='https://unsplash.com/photos/eHpYD4U5830'>Link</a> </p>"
        },
        {
          "lg_size": "1600-2400",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1610448721566-47369c768e70?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@patwhelen' >Pat Whelen</a></h4><p>Location - <a href='https://unsplash.com/s/photos/portsea-vic,-australia'>Portsea VIC, Australia</a> No caption <a href='https://unsplash.com/photos/EKLXDQ-dDRg'>Link</a> </p>"
        },
        {
          "lg_size": "1600-1067",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@derekthomson' >Derek Thomson</a></h4><p>Location - <a href='https://unsplash.com/s/photos/mcway-falls,-united-states'>McWay Falls, United States</a> No caption <a href='https://unsplash.com/photos/TWoL-QCZubY'>Link</a> </p>"
        },
        {
          "lg_size": "1600-2400",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1539678050869-2b97c7c359fd?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@michaljaneck' >Michal Janek</a></h4><p>Location - <a href='https://unsplash.com/s/photos/big-sur,-united-states'>Big Sur, United States</a> Coast </p>"
        },
        {
          "lg_size": "1600-2400",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1446630073557-fca43d580fbe?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@papillon' >Iris Papillon</a></h4><p>Location - <a href='https://unsplash.com/s/photos/big-sur,-united-states'>Big Sur, United States</a> Big Sur drive </p>"
        },
        {
          "lg_size": "1600-1065",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1596370743446-6a7ef43a36f9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@piyushh_dubeyy' >piyush dubey</a></h4><p>Published on August 2, 2020</p>"
        },
        {
          "lg_size": "1600-2134",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1464852045489-bccb7d17fe39?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@fynn_it' >fynn</a></h4><p>Location - <a href='https://unsplash.com/s/photos/big-sur,-united-states'>Big Sur, United States</a> Wasserauen, Appenzell Innerrhoden, Schweiz </p>"
        },
        {
          "lg_size": "1600-1060",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@danielleone' >Daniel Leone</a></h4><p>Location - <a href='https://unsplash.com/s/photos/poon-hill,-ghode-pani,-nepal'>Poon Hill, Ghode Pani, Nepal</a> Taken from the top of Poon Hill before sun rise </p>"
        },
        {
          "lg_size": "1600-1037",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1510011560141-62c7e8fc7908?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@bboba' >Boba Jovanovic</a></h4><p>Location - <a href='https://unsplash.com/s/photos/bay-of-kotor'>Bay of Kotor</a> Boka kotorska bay </p>"
        },
        {
          "lg_size": "1600-899",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1586276393635-5ecd8a851acc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@svsdesigns' >Surendra Vikram Singh</a></h4><p>Location - <a href='https://unsplash.com/s/photos/lachung,-sikkim,-india'>Lachung, Sikkim, India</a> Cloud covered mountain </p>"
        },
        {
          "lg_size": "1600-1067",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1471931452361-f5ff1faa15ad?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=2252&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@camadams' >Cam Adams</a></h4><p>Location - <a href='https://unsplash.com/s/photos/banff,-canada'>Banff, Canada</a> Lake along jagged mountains</p>"
        },
        {
          "lg_size": "1536-2304",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "src": "https://images.unsplash.com/photo-1508766206392-8bd5cf550d1c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=1536&q=80",
          "sub_html": "<h4>Photo by - <a href='https://unsplash.com/@rea_le' >Andrea Ledda</a></h4><p>Location - <a href='https://unsplash.com/s/photos/lago-goillet,-italy'>Lago Goillet, Italy</a> Goillet Lake at 2561 meters above Breuil-Cervinia</p>"
        }
      ],
      videoList:[
        {
          "lg_size": "1280-720",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "sub_html": "<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>",
          "src": "https://player.vimeo.com/video/112836958?autoplay=0&muted=1",// video 视频
          "poster": "https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg", // video 封面
          "video": '{"source": [{"src":"https://player.vimeo.com/video/112836958?autoplay=0&muted=1", "type" :"video/mp4"}], "attributes" :{ "preload": false, "controls" : true }}', 
        },
        {
          "lg_size": "1280-720",
          "pinterest_text": "Pin it3",
          "tweet_text": "lightGallery slide 4",
          "sub_html": "<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>",
          "src": "https://www.lightgalleryjs.com/videos/video1.mp4",
          "poster": "https://www.lightgalleryjs.com/images/demo/html5-video-poster.jpg", // video 封面
          "video": '{"source": [{"src":"https://www.lightgalleryjs.com/videos/video1.mp4", "type" :"video/mp4"}], "attributes" :{ "preload": false, "controls" : true }}', // video 视频
        },
      ]
    }
  },
  mounted(){
    this.lightgallery_vue2()
    this.lightgallery_vue2_video()
  },
  methods:{
    lightgallery_vue2(){
      const el = document.getElementById('lightgallery')
      // let arr = el.getElementsByTagName('a')
      // let lightgalleryList = []
      // let obj = {}
      // console.log(arr)
      // for(let i=0;i<arr.length;i++){
      //   console.log(arr[i], arr[i].dataset.lgSize)
      //   obj = {}
      //   obj.lg_size = arr[i].dataset.lgSize
      //   obj.pinterest_text = arr[i].dataset.pinterestText
      //   obj.tweet_text = arr[i].dataset.tweetText
      //   obj.src = arr[i].dataset.src
      //   obj.sub_html = arr[i].dataset.subHtml
      //   lightgalleryList.push(obj)
      // }
      // console.log(lightgalleryList)
      // this.imageList = lightgalleryList
      window.lightGallery(el,{
        // mode:'lg-rotate'
        // exThumbImage: 'data-external-thumb-image',
      })
    },
    lightgallery_vue2_video() {
      const el = document.getElementById('lightgallery1')
      window.lightGallery(el, {})
    },
  }
}
</script>

<style lang="scss" scoped>
  .gallery-item1{
    // height: 360px;
    width: 240px;
    // overflow: hidden;
    margin: 2px;
    // display: inline-flex;
    display: inline-block;
    .img-responsive{
      width: 100%;
      // height: auto;
    }
  }
  .t{
    font-size: 20px;
    color: brown;
    margin-top: 20px;
  }
  .btn_c {
    --border-radius: 15px;
    --border-width: 4px;
    border-radius: 15px;
    appearance: none;
    position: relative;
    padding: 1em 2em;
    border: 0;
    background-color: #212121;
    font-family: "Roboto", Arial, "Segoe UI", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    z-index: 2;
  }
  .btn_c::after {
    --m-i: linear-gradient(#000, #000);
    --m-o: content-box, padding-box;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: var(--border-width);
    border-radius: var(--border-radius);
    background-image: conic-gradient(#488cfb,
        #29dbbc,
        #ddf505,
        #ff9f0e,
        #e440bb,
        #655adc,
        #488cfb);
    -webkit-mask-image: var(--m-i), var(--m-i);
    mask-image: var(--m-i), var(--m-i);
    -webkit-mask-origin: var(--m-o);
    mask-origin: var(--m-o);
    -webkit-mask-clip: var(--m-o);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
    filter: hue-rotate(0);
    animation: rotate-hue linear 500ms infinite;
    animation-play-state: paused;
  }
  .btn_c:hover::after {
    animation-play-state: running;
  }
  @keyframes rotate-hue {
    to {
      filter: hue-rotate(1turn);
    }
  }
  .btn_c,
  .btn_c::after {
    box-sizing: border-box;
  }
  .btn_c:active {
    --border-width: 5px;
  }
</style>
